<template>
	<!-- <div>{{ msg }}</div> -->
	<div>
		<!-- Main Wrapper -->
		<div class="main-wrapper">
			<!-- Header -->
			<div class="header">
				<!-- Logo -->
				<div class="header-left">
					<!-- <a href="index.html" class="logo"> -->
					<a class="logo">
						<img src="../assets/img/logo.png" alt="Logo" />
					</a>
					<!-- <a href="index.html" class="logo logo-small"> -->
					<a class="logo logo-small">
						<img src="../assets/img/logo-small.png" alt="Logo" width="30" height="30" />
					</a>
				</div>
				<!-- /Logo -->
				<!-- <a href="javascript:void(0);" id="toggle_btn">
					<i class="fas fa-bars"></i>
				</a> -->
				<!-- <div class="top-nav-search">
					<form>
						<input type="text" class="form-control" placeholder="Search here" />
						<button class="btn" type="submit">
							<i class="fa fa-search"></i>
						</button>
					</form>
				</div> -->
				<!-- Mobile Menu Toggle -->
				<!-- <a class="mobile_btn" id="mobile_btn"> <i class="fas fa-bars"></i> </a> -->
				<!-- /Mobile Menu Toggle -->
				<!-- Header Right Menu -->
				<ul class="nav user-menu">
					<!-- Flag -->
					<!-- <li class="nav-item dropdown has-arrow flag-nav mr-2">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
							<img src="../assets/img/flags/us-1.png" alt="" width="32" height="32"
								class="rounded-circle" />
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="../assets/img/flags/us.png" alt="" height="16" /> English
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="../assets/img/flags/fr.png" alt="" height="16" /> French
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="../assets/img/flags/es.png" alt="" height="16" /> Spanish
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="../assets/img/flags/de.png" alt="" height="16" /> German
							</a>
						</div>
					</li> -->
					<!-- /Flag -->
					<!-- Notifications -->
					<!-- <li class="nav-item dropdown">
						<a href="#" class="nav-link notifications-item">
							<i class="feather-bell"></i>
							<span class="badge badge-pill">3</span>
						</a>
					</li> -->
					<!-- /Notifications -->
					<!-- Chat -->
					<!-- <li class="nav-item dropdown">
						<a href="chat.html" class="dropdown-toggle nav-link chat-header">
							<i class="feather-message-square"></i>
							<span class="badge badge-pill header-chat">6</span>
						</a>
					</li> -->
					<!-- /Chat -->
					<li class="nav-item dropdown has-arrow main-drop ml-md-3">
						<!-- <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img"><img src="../assets/img/avatar.jpg" alt="" />
								<span class="status online"></span>
							</span>
						</a> -->
						<el-dropdown @command="tuichu">
  							<span class="user-img" style="padding: 17px;">
								<img src="../assets/img/avatar.jpg" alt="" />
								<span class="status online"></span>
							</span>
  							<el-dropdown-menu slot="dropdown">
    							<el-dropdown-item>退出</el-dropdown-item>
  							</el-dropdown-menu>
						</el-dropdown>
						
					</li>
				</ul>
				<!-- /Header Right Menu -->
			</div>
			<!-- /Header -->

			<!-- Sidebar -->
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="menu-title"><span>Main</span></li>
							<!-- <li class="active">
                <a @click="jixiao"><i class="feather-list"></i><span class="shape1"></span
                  ><span class="shape2"></span> <span>医生绩效配置</span></a
                >
              </li> -->
							<!-- <li class="submenu">
                <a href="#"
                  ><i class="feather-grid"></i> <span>设备管理</span>
                  <span class="menu-arrow"></span
                ></a>
                <ul>
                  <li style="color:#ffff" @click="fenlei"><a >新增分类</a></li>
                  <li style="color:#ffff" @click="shebei"><a >新增设备</a></li>
                </ul>
              </li> -->
							<!-- <li style="color:#ffff" @click="yygzt"><a ><i class="feather-user"></i> <span>预约工作台</span></a>
							</li> -->
							<li style="color:#ffff" @click="rzsh"><a><i class="feather-home"></i><span>认证审核</span></a>
							</li>
							<!-- <li style="color:#ffff" @click="myyy"><a><i class="feather-user"></i> <span>我的预约</span></a>
							</li> -->
							<!-- <li style="color:#ffff" @click="myrenzheng"><a><i class="feather-calendar"></i> <span>我的认证</span></a>
							</li> -->
							<!-- <li class="submenu">
                <a href="#"
                  ><i class="feather-grid"></i> <span>设备</span>
                  <span class="menu-arrow"></span
                ></a>
                <ul>
                  <li style="color:#ffff" @click="czrz"><a >操作日志</a></li>
                  <li style="color:#ffff" @click="zhgl"><a >账号管理</a></li>
                  <li style="color:#ffff" @click="password"><a >修改密码</a></li>
                </ul>
              </li> -->
						</ul>
					</div>
				</div>
			</div>
			<!-- /Sidebar -->

			<!-- Page Wrapper -->
			<div class="page-wrapper">
				<div class="content container-fluid">
					<div class="row">
						<div class="col-sm-12">
							<div class="card">
								<div class="card-body">
									<div class="con">
										<div class="con_title">
											<div class="line"></div>
											<div class="text">认证审核</div>
										</div>
										<!-- <div class="add" @click="add">
                      <el-row>
                        <el-button class="button">
                          <div class="button_add">
                            <div class="jia">+</div>
                            <p class="xz">新增</p>
                          </div>
                        </el-button>
                      </el-row>
                    </div> -->
									</div>

									<el-divider></el-divider>
									<div style="display: flex;flex-direction: row;">
										<p style="font-size: 15px;">状态</p>
										<el-select v-model="value2" placeholder="全部" style="margin-left: 2%;" @change="gostatus(value2)">
											<el-option v-for="item in options" :key="item.value" :label="item.label"
												:value="item.value"  >
											</el-option>
										</el-select>
										<div class="search">
											<input type="text" placeholder="医生姓名/医疗机构" v-model="apply" />
											<button class="icon" @click="selectAudits">
												<img style="width: 30%" src="../assets/img/search.png" alt="" />
											</button>
										</div>
										<!-- <div class="search">
											<input type="text" placeholder="工号" v-model="workId" />
										</div> -->
									</div>
									<div class="table-responsive" v-if="select===1">
										<table class="table">
											<thead>
												<tr>
													<th>序号</th>
													<th>申请编号</th>
													<th>医生姓名</th>
													<th>医疗机构</th>
													<th>规范国家老年疾病临床医学研究中心环节</th>
													<th>手机号码</th>
													<th>管理制度</th>
													<th>协调体系</th>
													<th>创建时间</th>
													<th>填报人员</th>
													<th>审核状态</th>
													<th style="width: 200px;">操作</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="(item, index) in list" :key="index">
													<td>{{ index+1 }}</td>
													<td>{{ item.applyNumber }}</td>
													<td>{{ item.name }}</td>
													<td>{{ item.medicalOrganization }}</td>
													<td style="max-width: 50px;
																overflow: hidden;
																text-overflow: ellipsis;" :title="item.specificationCenter">
														{{ item.specificationCenter }}
													</td>
													<td>{{ item.phone }}</td>
													<td style="max-width: 50px;
																overflow: hidden;
																text-overflow: ellipsis;" :title="item.manageSystem">
														{{item.manageSystem}}
													</td>
													<td style="max-width: 50px;
																overflow: hidden;
																text-overflow: ellipsis;" :title="item.coordinate">
														{{item.coordinate}}
													</td>
													<td>{{new Date(item.createTime).toLocaleDateString()}}</td>
													<td>{{item.writtenBy}}</td>
													<td v-if="item.status == 0">审核中</td>
													<td v-if="item.status == 1">已通过</td>
													<td v-if="item.status == 2">已拒绝</td>
													<td class="text-right d-flex"
														style="margin-top: -0.5%; width: 200px;">
														<el-button type="text" @click="xiangqing(item.id)">详情
														</el-button>
														<!-- <el-button type="text" @click="ok(item.id,1)">审核通过</el-button>
														<el-button type="text" @click="ok(item.id,2)">驳回申请</el-button> -->
													</td>
												</tr>
											</tbody>
										</table>
										<div class="block" @click="selectAudits">
											<el-pagination @size-change="handleSizeChange"
												@current-change="handleCurrentChange" :current-page="currentPage4"
												:page-sizes="[10]" :page-size="meiye" :total="zongtiaoshu"
												layout=" prev, pager, next,sizes,total,  jumper">
											</el-pagination>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Page Wrapper -->
		</div>
		<!-- /Main Wrapper -->
	</div>
</template>
<script src="../assets/js/jquery-3.6.0.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/js/script.js"></script>
<script>
	export default {
		data() {
			return {
				// msg: "" ,
				xiabiao: 1,
				options: [{
					value: '选项1',
					label: '审核中'
				}, {
					value: '选项2',
					label: '已通过'
				}, {
					value: '选项3',
					label: '已拒绝'
				}],
				value2: '',
				value1: '',
				input: '',
				input1: '',
				input2: '',
				select: 1,
				value: true,
				zhi: "1",
				currentPage4: 1,
				apply: '',
				workId:'',
				list: [],
				dialogFormVisible: false,
				dialogFormVisible1: false,
				yeshu:1,
				zongtiaoshu:1,
				meiye:1,
				formLabelWidth: '120px',
				status:null,
				gostat:null
			};
		},
		created() {
			this.selectAudits()
		},
		//一进来显示
		mounted() {
			$('#sidebar-menu a').on('click', function(e) {
				if ($(this).parent().hasClass('submenu')) {
					e.preventDefault();
				}
				if (!$(this).hasClass('subdrop')) {
					$('ul', $(this).parents('ul:first')).slideUp(350);
					$('a', $(this).parents('ul:first')).removeClass('subdrop');
					$(this).next('ul').slideDown(350);
					$(this).parent().find('a.active').next().slideDown(350);
					$(this).addClass('subdrop');
				} else if ($(this).hasClass('subdrop')) {
					$(this).removeClass('subdrop');
					$(this).next('ul').slideUp(350);
					$(this).parent().find('a').next().slideUp(350);
				}
			});
			$('#sidebar-menu ul li.submenu a.active').parents('li:last').children('a:first').addClass('active').trigger(
				'click');
		},
		// created(){
		//   this.xiangqing();
		// },
		methods: {
			//退出
			tuichu(){
				this.$router.push('/')
			},
			// 审核
			ok(id, stat) {
				if (stat == 1) {
					this.axios.post("/audit/alterStatus?id=" + id + "&status=" + stat + "&reject=''").then(res => {
						this.selectAudits()
						if (stat == 1) {
							this.axios.post('/audit/createPwd?id=' + id).then(res => {
								console.log('成功', res)
							})
						}
					})
					return
				}
				if (stat == 2) {
					this.$prompt('请输原因', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
					}).then(({
						value
					}) => {
						this.axios.post("/audit/alterStatus?id=" + id + "&status=" + stat + "&reject=" + value)
							.then(res => {
								this.selectAudits()
							})
					}).catch(() => {

					});
				}
			},

			gostatus(li){
				console.log("zhuagntia",li)
				if(li == "选项1"){
					this.gostat = 0
					return
				}
				if(li == "选项2"){
					this.gostat = 1
					return
				}
				if(li == "选项3"){
					this.gostat = 2
				}
			},

			//分页查询	查询的是上面的值POST
			selectAudits() {
				this.axios.post('/audit/selectAudits', {
					currentPage: this.xiabiao, //页面起始下标
					pageSize: 10, //页面容量
					value: this.apply, //模糊查询的值   可以为null
					status:this.gostat
				}).then(res => {
					console.log(res);
					this.list = res.list
					this.yeshu=res.totalPage
					this.zongtiaoshu=res.totalSize
					this.meiye=res.pageSize
					this.workId=res.workId
				})
			},
			//根据姓名查询状态Get
			getAuditByName() {
				if (this.apply == '') {
					this.selectAudits()
					return
				}
				this.axios.get('/audit/getAuditByNumber?applyNumber=' + this.apply).then(res => {
					let arr = [res]
					console.log(arr)
					this.list = arr
					this.apply = ''
				})
			},
			//根据id查询详情GET
			xiangqing(id) {
				console.log('出来', id)
				this.$router.push("/rzxxsh?id=" + id)
			},
			password() {
				this.$router.push("/password")
			},
			zhgl() {
				this.$router.push("/zhgl")
			},
			czrz() {
				this.$router.push("/czrz")
			},
			myrenzheng() {
				this.$router.push("/myrenzheng")
			},
			myyy() {
				this.$router.push("/myyy")
			},
			rzsh() {
				this.$router.push("/rzsh")
			},
			yygzt() {
				this.$router.push("/yuyue")
			},
			shebei() {
				this.$router.push("/sbguanli")
			},
			fenlei() {
				this.$router.push("/sbfenlei")
			},
			jixiao() {
				this.$router.push("/")
			},
			add() {
				this.$router.push("/scgbxinzeng");
			},
			dianji(val) {
				this.zhi = val;
				this.select = val;
				console.log(this.zhi)
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.xiabiao = val
				console.log('下标', this.xiabiao)
			},
		},
		// async created() {
		//   this.msg = await this.axios.post("/xs_demo", { name: "我是姓名" });
		// },
	};
</script>

<style src="../assets/css/bootstrap.min.css"></style>
<style src="../assets/plugins/fontawesome/css/fontawesome.min.css"></style>
<style src="../assets/plugins/fontawesome/css/all.min.css"></style>
<style src="../assets/css/feather.css"></style>
<style src="../assets/css/style.css"></style>
<style scoped>
	/deep/.el-dialog {
		width: 40%;
	}
</style>
<style lang="less" scoped>
	td {}

	.con {
		text-align: center;
		background: white;
		display: flex;
		flex-direction: row;

		.con_title {
			display: flex;
			flex-direction: row;
			width: 80%;

			.line {
				width: 5px;
				height: 25px;
				background: rgb(190, 47, 46);
			}

			.text {
				font-size: 18px;
				font-weight: 600;
				margin-left: 1%;
			}

			.active {
				background: rgb(190, 47, 46);
				color: #ffff !important;
				border: 0;
			}

			#title_div0 {
				font-size: 16px;
				width: 15%;
				padding: 0.5%;
				border: 2px solid rgb(204, 204, 204);
				border-right: 0;
				color: rgb(204, 204, 204);
				font-weight: 600;
				padding-top: 1%;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			#title_div1 {
				font-size: 16px;
				width: 15%;
				padding: 0.5%;
				border: 2px solid rgb(204, 204, 204);
				border-right: 0;
				padding-top: 1%;
				color: rgb(204, 204, 204);
				font-weight: 600;
			}

			#title_div2 {
				font-size: 16px;
				width: 15%;
				padding: 0.5%;
				border: 2px solid rgb(204, 204, 204);
				border-right: 0;
				padding-top: 1%;
				color: rgb(204, 204, 204);
				font-weight: 600;
			}

			#title_div3 {
				font-size: 16px;
				width: 15%;
				padding: 0.5%;
				padding-top: 1%;
				border: 2px solid rgb(204, 204, 204);
				color: rgb(204, 204, 204);
				font-weight: 600;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
		}

		.add {
			.button {
				background: rgb(190, 47, 46);

				.button_add {
					display: flex;
					flex-direction: row;

					.jia {
						width: 16px;
						border-radius: 10px;
						background: #ffff;
						color: rgb(190, 47, 46);
						font-weight: 700;
						font-size: 15px;
						line-height: 11px;
					}

					.xz {
						color: #ffff;
						margin-left: 10px;
					}
				}
			}
		}
	}

	.search {
		border: 2px solid rgb(204, 204, 204);
		width: 23%;
		margin-left: 2%;
		border-radius: 3px;
		position: relative;

		input {
			border: 0;
			color: rgb(204, 204, 204);
			height: 32px;
			font-size: 15px;
			width: 79%;
			margin-left: 2%;
			margin-top: 1%;
		}

		::-webkit-input-placeholder {
			color: rgb(204, 204, 204);
		}

		.icon {
			border: 0;
			background: rgb(190, 47, 46);
			color: #ffff;
			font-size: 20px;
			width: 19%;
			height: 36px;
			border-radius: 0;
			padding-bottom: 1%;
			position: absolute;
		}
	}

	.table-responsive {
		.table {
			tbody {
				tr:hover {
					box-shadow: 2px 2px 7px #777;
				}
			}
		}
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
